<template>
<div class="midjourney">
    <el-form
        label-position="top"
        :model="state.form"
    >
        <el-form-item label="图像描述">
            <el-input
                v-model="state.form.content"
                maxlength="200"
                placeholder="写下你的图像描述"
                show-word-limit
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 8 }"
                :disabled="state.form.is_submit"
            />
        </el-form-item>
        <el-form-item label="AI模型">
            <el-radio-group v-model="state.form.model" class="model-selection">
                <el-radio-button label="Midjourney" class="test">
                    <div>Midjourney</div>
                    <div class="n">真实感强</div>
                </el-radio-button>
                <el-radio-button label="Niji" class="test">
                    <div>Niji</div>
                    <div class="n">卡通动漫</div>
                </el-radio-button>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="尺寸">
            <div class="size-box">
                <div class="size-item" v-for="item in state.size" :key="item.name" :class="{active: item.active}" @click="size_click(item)">
                    <div class="content-text">{{item.name}}</div>
                </div>
            </div>
        </el-form-item>
        <el-form-item>
            <div class="select-box">
                <span>版本</span>
                <el-select v-model="state.form.version" placeholder="选择版本">
                    <el-option
                        v-for="item in state.version"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </div>
        </el-form-item>
        <el-form-item>
            <div class="select-box">
                <span>画质</span>
                <el-select v-model="state.form.quality" placeholder="选择画质">
                    <el-option
                        v-for="item in state.quality"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </div>
        </el-form-item>
        <el-form-item label="参考图">
            <el-upload
                class="upload-demo"
                drag
                multiple
                action="http://localhost:8000/api/ajax/upload"
                style="width: 100%;"
            >
                <el-icon size="32"><el-icon-UploadFilled /></el-icon>
                <div class="el-upload__text" style="font-size: 12px">点击或拖拽一个图片到这里作为输入<br>支持PNG和JPG格式</div>
            </el-upload>
        </el-form-item>
        <!--                    <FormItem type="image" v-model="state.form.image" style="width: 100%;" />-->
        <el-form-item label="参数">
            <div class="select-box">
                <span>混乱程度</span>
                <el-input-number v-model="state.form.disorder" :min="1" :max="100" change="handleChange" />
            </div>
            <div class="select-box">
                <span>风格化</span>
                <el-input-number v-model="state.form.disorder1" :min="1" :max="100" change="handleChange" />
            </div>
            <div class="select-box">
                <span>携带参数</span>
                <el-switch v-model="state.form.is_params" />
            </div>
        </el-form-item>
    </el-form>
</div>
</template>

<script setup lang="ts">
import {reactive, watch} from "vue";

const props = defineProps({
    data: {
        type: Object,
        default: () => {
            return {
                content: '',
                size: '1:1',
            }
        }
    },
})
// params: {
//     ar: '16:9',
//     v: 5.2,
//     s: 250,
//     c: 0,
//     q: 1,
// },
// 生成参数 --ar 16:9 --v 5.2 --s 250 --c 0 --q 1
//state.form.content = state.form.content + '--ar 16:9 --v 5.2 --s 250 --c 0 --q 1';

const state: {
    form: any,
    size: any,
    version: any,
    quality: any,
} = reactive({
    form: {
        is_submit: false,
        content: '',
        model: 'Midjourney',
        size: '1.1',
        version: 5.2,
        quality: 1,
        disorder: 1,
        disorder1: 1,
        image: '',
        // 参数
        params: {
            ar: '1.1',
            v: 6.0,
            s: 250,
            c: 0,
            q: 1,
        },
        is_params: true, // 携带参数
    },
    size: [
        { name: '1:1', active: true },
        { name: '4:3', active: false },
        { name: '3:4', active: false },
        { name: '16:9', active: false },
        { name: '9:16', active: false },
    ],
    version: [
        {value: '6.0', label: '6.0',},
        {value: '5.2', label: '5.2',},
        {value: '5.1', label: '5.1',},
        {value: '5', label: '5',},
        {value: '4', label: '4',},
    ],
    quality: [
        {value: 1, label: '普通',},
        {value: 2, label: '清晰',},
        {value: 3, label: '超清',},
    ],
});

// 监听数据变化,并且向父组件发送数据
const emit = defineEmits(['update:data']);
watch(() => state.form, (val) => {
    emit('update:data', val);
}, { deep: true });


const size_click = (item: any) => {
    state.size.forEach((value: any) => {
        value.active = false
    })
    state.form.size = item.name
    item.active = true
}

// 监听size 改变params
watch(() => state.form.size, (val) => {
    state.form.params.ar = val
});
// 监听version 改变params
watch(() => state.form.version, (val) => {
    state.form.params.v = val
});
// 监听quality 改变params
watch(() => state.form.quality, (val) => {
    state.form.params.q = val
});
// 监听disorder 改变params
watch(() => state.form.disorder, (val) => {
    state.form.params.s = val
});
// 监听disorder1 改变params
watch(() => state.form.disorder1, (val) => {
    state.form.params.c = val
});
// 组合params
// watch(() => state.form.params, (val) => {
//     let params = ''
//     for (let key in val) {
//         params += `--${key} ${val[key]} `
//     }
//     state.form.content = state.form.content + params
// });
</script>

<style scoped lang="scss">

</style>
